<!--
 * @Author: Shber
 * @Date: 2024-07-01 14:10:58
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-01 15:38:10
 * @Description: 基于tmui-icon拓展
-->
<template>
  <tm-icon 
    :name="name"
    :fontSize="fontSize" 
    :color="color" 
    customicon 
    :spin="spin"
    :rotate="rotate"
    :rotateDeg="rotateDeg"
  >
  </tm-icon>

</template>
<script setup>
  import { onBeforeMount } from 'vue'

  const props = defineProps({
    fontSize: {
      type: [Number, String],
      default: 34,
    },
    color: {
      type: String,
      default: "#999999",
    },
    /** 自定义图标规则为:myicon-music-e617,图标前缀和字体名称相同-图标类名-图标unicode符 */
    name: {
      type: String, //图标名称。
      default: "",
    },
    code:{
      type: String, //图标Unicode（16 进制）,app渲染使用
      default: "e644",
    },
    spin: { // 是否使图标旋转
      type: [Boolean],
      default: false,
    },
    unit: { // 字号单位
      type: String,
      default: "rpx",
    },
    rotate: { // 是否允许单独控制图标旋转的角度
      type: Boolean,
      default: false,
    },
    rotateDeg: { // 图标旋转的角度
      type: Number,
      default: 0,
    },
    //为了提高响应速度，只有开启了自定图标显示功能才会去解析用户自定义图标规则名称
    customicon:{
      type: Boolean,
      default: false,
    }
  })

// #ifdef APP-NVUE || APP-PLUS-NVUE
import { customfont } from '@/static/font/customfont'
  var domModule = weex.requireModule('dom')
  const animation = uni.requireNativePlugin('animation')
// #endif

// #ifdef APP-PLUS-NVUE
  onBeforeMount(() => {
    domModule.addRule('fontFace', {
      fontFamily: 'myicon', //注意这里必须是驼峰命名，跟上面的css样式对照
      src: "url('data:font/ttf;charset=utf-8;base64," + customfont + "')"
    })
  })
// #endif
</script>